<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" />

  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate :columns="columns" ref="tableRef" />

  <!-- 用户添加表单 -->
  <UserAdd ref="addRef" @dataReload="getTableData" />

  <!-- 用户修改表单  -->
  <UserEdit ref="editRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { onMounted, useTemplateRef } from 'vue';
  import SearchFormTemplate, { type SearchFormItem } from '@/components/template/form/search-form-template.vue'; // 搜索区模版
  import ToolbarTemplate, { type ToolbarItem } from '@/components/template/button/toolbar-template.vue'; // 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue'; //分页表格模版

  import UserAdd from '@/views/user/user_add.vue'; //模块添加页
  import UserEdit from '@/views/user/user_edit.vue'; //模块添加页
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addInstance.value?.show(); //调用子组件 显式弹窗方法
  };
  const addInstance = useTemplateRef('addRef'); //模块添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editInstance.value?.show(id); //调用子组件 显示 弹窗方法
  };
  const editInstance = useTemplateRef('editRef'); //模块修改模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => {
    await tableInstance.value?.getTableData(pageAction, pageParams);
  };
  const tableInstance = useTemplateRef('tableRef'); //table-template组件引用，用于执行组件内部方法
  const pageAction = 'base.manage.user.ServiceImpl.page'; //page数据 请求接口 方法名
  const pageParams = { account_type: '3' }; //page数据 请求参数,查询总后台模块

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig: ToolbarItem[] = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add',
      permission: 'user_add',
      onClick: onAdd,
    },
  ];

  /* [搜索配置] */
  const searchConfig: SearchFormItem[] = [
    { title: '用户名称', dataIndex: 'account_name', type: 'input', width: 150 },
    {
      title: '账户状态',
      dataIndex: 'account_state',
      type: 'select',
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 2 },
      ],
    },
    { title: '注册时间', dataIndex: 'reg_time', type: 'date-range', width: 250 },
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    { title: '账号', fixed: 'left', dataIndex: 'account', width: 180 },
    { title: '账户名', dataIndex: 'account_name', width: 280 },
    { title: '账户类型', dataIndex: 'account_type', options: { 1: '模块', 2: '菜单', 3: '按钮' } },
    { title: '邮箱', dataIndex: 'email', width: 200 },
    { title: '手机号', dataIndex: 'mobile_phone', width: 150 },
    { title: '账户状态', dataIndex: 'account_state' },
    { title: '注册时间', dataIndex: 'reg_time', width: 180 },
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'user_edit',
          onClick: (record) => onEdit(record.user_id),
        },
        {
          children: () => '删除',
          type: 'link',
          permission: 'user_delete',
          onClick: (record) => onEdit(record.module_id),
        },
      ],
    },
  ];
</script>
<style lang="less" scoped></style>
